<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){

            //根据id的属性值查找元素节点（根据id的属性值获取元素的DOM对象）
            // 注意:id的属性值不能重复，此时返回的是第一个元素的DOM对象
            var mydiv=document.getElementById("mydiv");
            console.log(mydiv);


        }
        function f2(){
            //根据name的属性值获取对应的元素节点的集合(根据name的属性值获取元素的DOM对象的集合)
            var hobbies=document.getElementsByName("hobby");
            console.log(hobbies);
            console.log(hobbies[0]);
            for(var i=0;i<hobbies.length;i++){
                console.log(hobbies[i]);
            }
        }
        function f3(){
            // 根据标签名查找元素节点的集合（根据标签名获取元素的DOM对象的集合）
            var inputs=document.getElementsByTagName("input");
            console.log(inputs);
            console.log(inputs[0]);
        }
        function f4(){
            // 根据指定的css选择器来进行查询元素节点(根据指定的css选择器来进行查询元素的DOM对象)
            // var div=document.querySelector("div");//符合条件的第一个DOM对象
            // console.log(div);
            var p=document.querySelector(".hehe");
            console.log(p);

            var input=document.querySelector("body>input");
            console.log(input);
        }
        function f5(){
            // 根据指定的css选择器来进行查询元素节点集合( 根据指定的css选择器来进行查询元素的DOM对象集合)
            var divs=document.querySelectorAll("div");
            console.log(divs);

            var ps=document.querySelectorAll(".hehe");
            console.log(ps);
            console.log(ps[0]);
        }

        function f6(){
            var mydiv3=document.getElementById("mydiv3");
            // DOM对象.属性
            // console.log(mydiv3.innerHTML);//获取div中的内容

            //DOM对象.属性名=值
            mydiv3.innerHTML="我是王柏强";

            var inputs=document.getElementsByTagName("input");
            // DOM对象.value  获取值
           console.log(inputs[inputs.length-1].value);
            // DOM对象.value=值
            inputs[inputs.length-1].value="哈哈哈";

            var input=document.querySelector("#mydiv3+input");
            console.log(input.value);
        }
    </script>
</head>
<body>
    <!--onclick表示当点击该标签的时候-->
    <input type="button" value="根据id查询对应的元素节点" onclick="f1()">
    <input type="button" value="根据name的属性值获取对应的元素节点的集合" onclick="f2()">
    <input type="button" value="根据标签名查找元素节点的集合" onclick="f3()">
    <input type="button" value="根据指定的css选择器来进行查询元素节点" onclick="f4()">
    <input type="button" value="根据指定的css选择器来进行查询元素节点集合" onclick="f5()">
    <input type="button" value="操作元素的内容与value" onclick="f6()">
    <div id="mydiv">div01</div>
    <div id="mydiv2">div02</div>
    <input type="checkbox" name="hobby" value="eat">吃饭
    <input type="checkbox" name="hobby" value="sleep">睡觉
    <input type="checkbox" name="hobby" value="bean">打豆豆
    <p class="hehe">p01</p>
    <p class="hehe">p02</p>
    <p class="hehe">p03</p>
    <p class="hehe">p04</p>
    <div id="mydiv3">我是div</div>
    <input type="text" value="10" >

</body>
</html>